<template>
  <div class="header">
    <ul>
      <li>
        <router-link to="/" class="logo"
          ><img src="../static/images/style3.webp" alt="" srcset=""
        /></router-link>
      </li>
      <li v-for="(item, i) in arr" @click="changeColor(i)">
        <router-link :to="{ path: item.src }" exact>{{
          item.title
        }}</router-link>
      </li>
    </ul>
  </div>
</template>
<style lang="scss">
@import "../static/style/variable.scss";
body {
  position: relative;
  .header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: #fff;
    width: 100%;
    height: 2.6667rem;
    ul {
      position: relative;
      display: flex;
      border-bottom: 1px solid $borderActiveColor;
      li {
        flex: 24%;
        text-align: center;
        height: 2.6667rem;
        line-height: 2.6667rem;
        a {
          font-size: $fontSize;
          color: $color;
          &.router-link-active {
            color: #ff5f8c;
          }
        }
      }
    }
  }
}
</style>
<script>
export default {
  name: "homeNav",
  data() {
    return {
      arr: [
        {
          title: "推荐",
          src: "/",
          comPon: "my-com",
        },
        {
          title: "排行",
          src: "/rank/riman",
          comPon: "my-rank",
        },
        {
          title: "分类",
          src: "/classify",
          comPon: "my-classify",
        },
        {
          title: "我的",
          src: "/my",
          comPon: "my-login",
        },
      ],
      index: 0,
      comName: "my-com",
    };
  },
  methods: {
    changeColor(value) {
      this.index = value;
      console.log(this.index);
    },
  },

  beforeRouteEnter(to, from, next) {
    if (!localStorage.getItem("aaa")) {
      next("/login");
    }
  },
};
</script>